<template>
  <div>


    <h1 style="text-align: center">文章管理</h1>
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 80%; margin-top: 20px; margin-left: 152px" stripe
      @selection-change="handleSelectionChange">
      <el-table-column prop="title" label="标题">
      </el-table-column>
      <el-table-column prop="issueTime" label="发行时间">
      </el-table-column>
      <el-table-column prop="state" label="状态">
        <template slot-scope="scope">
          <el-tag size="small" v-if="scope.row.state === 1" type="success">已通过</el-tag>
          <el-tag size="small" v-else-if="scope.row.state === 0" type="warning">待审核</el-tag>
          <el-tag size="small" v-else-if="scope.row.state === 2" type="danger">未通过</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="icon" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="editHandle(scope.row.id)">编辑</el-button>
          <el-divider direction="vertical"></el-divider>
          <template>
            <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delHandle(scope.row.id)">
              <el-button type="text" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
          <el-divider direction="vertical"></el-divider>
          <el-button type="text" @click="look(scope.row.id)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-left: 152px; margin-top: 15px" @size-change="handleSizeChange" @current-change="handleCurrentChange"
      layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100]" :current-page="current"
      :page-size="size" :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "Manage",
  data() {
    return {
      total: 0,
      size: 10,
      current: 1,
      tableData: [],
    }
  },
  created() {
    this.LoadData();
  },
  methods: {
    LoadData() {
      this.$axios.get("/article/my", {
        params: {
          pageNum: this.current,
          pageSize: this.size
        }
      }).then(res => {
        this.tableData = res.data.data.records
        this.size = res.data.data.size
        this.current = res.data.data.current
        this.total = res.data.data.total
      })
    },
    look(id) {
      const ARTICLE_URL = "http://101.43.12.19/#/article/detail/" + id;
      //return ARTICLE_URL;
      window.open(ARTICLE_URL, "_blank")
    },
    delHandle(id) {

      var ids = []

      if (id) {
        ids.push(id)
      } else {
        this.multipleSelection.forEach(row => {
          ids.push(row.id)
        })
      }

      console.log(ids)

      this.$axios.post("/article/delete", ids).then(res => {
        this.LoadData();
        this.$message({
          showClose: true,
          message: '恭喜你，操作成功',
          type: 'success',
          onClose: () => {
            this.getUserList()
          }
        });
      })

    },
    editHandle(arti_id) {
      //window.open('http://101.43.12.19/#/arti/edit',"edit", 'edit_id = arti_id')
      this.$router.push({
        name:'ArticleEdit',
        params: {
          edit_id: arti_id
        }
      })
    }
  }
}
</script>

<style scoped>
.avatar {
  scale: 3;
}
</style>
